<!DOCTYPE html>
<html ng-app="Twitter">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <title>Tweet Search</title>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
    <script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
  </head>
  <body>
    <div  ng-controller="TwitterCtrl">
      <form class="form-wrapper" name="myForm">
        <input type="text" ng-model="searchTerm" id="search"
                   ng-keyup="$event.keyCode == 13 ? doSearch() : null"
                   placeholder="Search Tweet">
        <button type="submit" id="submit" ng-click="doSearch()" >Search</button>
        <div ng-if="isError" class="error">
          <span class="glyphicon glyphicon-warning-sign"></span> {{ error }}
        </div>
      </form>
      <h3>Results</h3>
      <div class="result-wrap">
        <ul>
          <li class="no-result" ng-hide="hideit">Kindly search using the form above.</li>
          <li ng-repeat="tweet in twitterResult.statuses" ng-bind-html-unsafe="tweet.text"></li>
        </ul>
      </div>
    </div>
    <script>
      angular.module('Twitter', ['ngResource']);
      function TwitterCtrl($scope, $resource) {
        $scope.twitter = $resource('https://api.loklak.org/api/:action',
          {
            action:'search.json',
            callback:'JSON_CALLBACK'
          },
          {
            get:{
              method:'JSONP'
            }
          });
        $scope.hideit = false;
        $scope.doSearch = function () {
          $scope.isError = false;
          $scope.error = "";
          if ($scope.searchTerm === undefined || $scope.searchTerm === "") {
            $scope.isError = true;
            $scope.error = "Please enter something to search";
            return;
          }
          if ($scope.hideit !== true) {
            $scope.hideit = !$scope.hideit;
          }
          $scope.twitterResult = $scope.twitter.get({q:$scope.searchTerm});
        };
      }
    </script>
  </body>
</html>
